pub mod nest_t {
    use yew::prelude::*;
    use std::rc::Rc;

    #[derive(Clone, PartialEq, Properties)]
    pub struct ListItemProps {
        pub value: String,
    }

    pub struct ListItem;

    // the base cell component
    impl Component for ListItem {
        type Message = ();
        type Properties = ListItemProps;
        fn create(_ctx: &Context<Self>) -> Self {
            Self
        }
        fn view(&self, ctx: &Context<Self>) -> Html {
            html!{
                <span>
                    // print the value -> ListItemProps.value: String
                    {ctx.props().value.clone()}
                    <br/>
                </span>
            }
        }
    }

    #[derive(PartialEq, Properties)]
    pub struct NestProps {
        // only receive component which type is ListItem
        pub children: ChildrenWithProps<ListItem>,
    }

    pub struct NestList;

    // change print format from cell Component
    impl Component for NestList {
        type Message = ();
        type Properties = NestProps;
        fn create(_ctx: &Context<Self>) -> Self {
            Self
        }
        fn view(&self, ctx: &Context<Self>) -> Html {
            html!{
                <div id="list">
                    {
                        for ctx.props().children.iter()
                            .map(|mut item| {
                                // Rc::make_mut -> Rc and clone a new inner value 
                                // get props from item Component
                                let mut props = Rc::make_mut(&mut item.props);
                                // change props.value format
                                props.value = format!("item-{}", props.value);
                                // return the changed props's item
                                item
                            })
                    }
                </div>
            }
        }
    }
}